<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<!-- <link rel="stylesheet" href="css/metro-bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.widget.min.js"></script>
<script src="js/metro.min.js"></script> -->

<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="css/iconFont.css" rel="stylesheet">
<link href="css/cmp.css" rel="stylesheet">

<!-- Load JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.widget.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/prettify.js"></script>
<script src="js/cmp.js"></script>
<script src="js/load-metro.js"></script>

<!-- Load Chart JavaScript Libraries -->
<script src="js/amcharts.js"></script>
<script src="js/pie.js"></script>


<!-- <script type="text/javascript"	src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript"	src="http://www.amcharts.com/lib/3/pie.js"></script> -->
<!-- <script type="text/javascript"
	src="http://www.amcharts.com/lib/3/themes/none.js"></script> -->
<style type="text/css">
#chartdiv {
	width: 100%;
	height: 500px;
	font-size: 11px;
}
</style>

</head>
<body class="metro" >

	<script type="text/javascript">
		var complaints;

		function login() {
			$.ajax({
				type : "POST",
				url : "/ComplaintReg/rest/service/login",
				data : $("#userlogin").serialize(),
				success : function(data) {
					//console.log(data);
					response = JSON.parse(data);

					if (response.login == "true" && response.loginType == "user") {
						$("#dispLoginId").text(response.loginName);
						$("#dispCurrUser").show();
						$.Notify({
							content : "login successfull",
							style : {
								background : 'DeepSkyBlue'
							}
						});

						createCookie("loginId", response.id, "1");
						createCookie("loginType", response.loginType, "1");

						dispUserView();

					} else if (response.login == "true" && response.loginType == "dept") {

						$("#dispLoginId").text(response.loginName);
						$("#dispCurrUser").show();
						$.Notify({
							content : "login successfull",
							style : {
								background : 'DeepSkyBlue'
							}
						});
						$("#loginform").hide();
						createCookie("loginId", response.id, "1");
						createCookie("loginType", response.loginType, "1");
						dispDeptView();

					} else {
						$("#loginheader").text("incorrect credentials");
						$("#loginheader").css('background-color', 'coral')
					}
				}
			});
		}

		$(document).ready(function() {

			$("#userlogin").submit(function() {
				//console.log($("#userlogin").serialize());
				login();

				return false;
			});
		});
	</script>

	<!-- 	<div class="row">
		<div class="ball"></div>
		<div class="ball1"></div>
	</div> -->

	<!-- --------------------------------------------------------------------NAV BAR START--------------------------------------------------->
	<nav class="navigation-bar bg-lightBlue">
		<nav class="navigation-bar-content">
			<div class="element">COMPLAINT MANAGER</div>

			<span class="element-divider"></span> <a class="element brand"
				href="#"><span class="icon-spin"></span></a> <span
				class="element-divider"></span>

			<div class="element" id="dispCurrUser" style="display: none">
				<a class="dropdown-toggle" id="dispLoginId" href="#"> <span
					class="icon-cog"></span>
				</a>
				<ul class="dropdown-menu place-right" data-role="dropdown">
					<li><a href="#">Logout</a></li>
				</ul>
			</div>

		</nav>
	</nav>

	<!-- --------------------------------------------------------------------NAV BAR END    --------------------------------------------------->
	<!-- --------------------------------------------------------------------LOGIN VIEW START--------------------------------------------------->
	
	<div id="loginform" class="container">

		<div class="grid">
			<div class="row">
				<div class="span12">
					<h1 id="loginheader" class="text-center">Login</h1>
				</div>
			</div>
			<div class="row">
				<div class="span4"></div>
				<div class="span4">

					<form id="userlogin">
						<fieldset>

							<label>User Id</label>
							<div class="input-control text" data-role="input-control">
								<input name="id" type="text" placeholder="type id">
								<button class="btn-clear" tabindex="-1" type="button"></button>
							</div>
							<label>Password</label>
							<div class="input-control password" data-role="input-control">
								<input name="pwd" type="password" placeholder="type password"
									autofocus="">
								<button class="btn-reveal" tabindex="-1" type="button"></button>
							</div>

							<input type="submit" value="Submit">
						</fieldset>
					</form>

				</div>
				<div class="span4"></div>
			</div>

		</div>
	</div>

	<!-- --------------------------------------------------------------------LOGIN VIEW END--------------------------------------------------->

	<!-- --------------------------------------------------------------------USER VIEW START--------------------------------------------------->
	<div id="DivUserView" class="container" style="display: none">

		<div class="grid">
			<div class="row">

				<div class="span2">
					<div class="row">
						<button class="shortcut warning" id="userCreateComplaints">
							<i class="icon-rocket"></i> Create Complaint<small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>
					<div class="row">
						<button class="shortcut info" id="userViewComplaintsButton">
							<i class="icon-rocket"></i> View Complaints <small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>
					<div class="row">
						<button class="shortcut info">
							<i class="icon-rocket"></i> Rocket <small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>
					<div class="row">
						<button class="shortcut info">
							<i class="icon-rocket"></i> Rocket <small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>

				</div>
				<div class="span12">

					<div class=grid id="DivCreateComplaint" style="display: none">
						<div class=row>
							<form id="createcomp">
								<fieldset>
									<legend>Complaint Details</legend>
									<label>Department</label>
									<div class="input-control select">
										<select name="did" id="departmentselect">
										</select>
									</div>
									<label>Location</label>
									<div class="input-control text" data-role="input-control">
										<input name="location" type="text" placeholder="type id">
										<button class="btn-clear" tabindex="-1" type="button"></button>
									</div>
									<label>Description</label>
									<div class="input-control textarea">
										<textarea name="desc" placeholder="enter description"></textarea>
									</div>

									<input type="submit" value="Submit">
								</fieldset>
							</form>
						</div>
					</div>

					<div class=grid id="userComplaintList" style="display: none">
						<div class=row>
							<div class="input-control text">
								<input type="text" id="InputUserCompTableSearch"
									placeholder="search" />
								<button class="btn-search"></button>
							</div>
							<table id="userComplaintsTable" class="table striped hovered">
								<thead>
									<tr>
										<td>Complaint Id</td>
										<td>Location</td>
										<td>Date</td>
										<td>Description</td>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>

						</div>

					</div>
				</div>

			</div>

		</div>
	</div>


	<!-- --------------------------------------------------------------------USER VIEW END--------------------------------------------------->

	<!-- --------------------------------------------------------------------DEPT VIEW START     --------------------------------------------------->
	<div class="container" id="deptview" style="display: none">
		<div class="grid">

			<div class="row">
				<div class="span2">
					<div class="row">
						<button class="shortcut info" id="ButtonOpenComplaints">
							<i class="icon-rocket"></i> Open Complaints <small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>
					<div class="row">
						<button class="shortcut info">
							<i class="icon-rocket"></i> View Complaints <small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>
					<div class="row">
						<button class="shortcut info" id="ButtonViewDeptReport">
							<i class="icon-rocket"></i> View Report <small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>
					<div class="row">
						<button class="shortcut info">
							<i class="icon-rocket"></i> Rocket <small
								class="bg-cobalt fg-white">10</small>
						</button>
					</div>

				</div>
				<div class="span10"></div>

				<div class="row" id="complaintList" style="display: none">
					<div class="span12">
						<div class="input-control text">
							<input type="text" id="DeptOpenCompSearch" placeholder="search" />
							<button class="btn-search"></button>
						</div>
						<table id="complaintsTable" class="table striped hovered">
							<thead>
								<tr>
									<td>Complaint Id</td>
									<td>Location</td>
									<td>Date</td>
									<td>Description</td>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>
				<div class="row" id="divChartContainer">
					<div class="span12">
						<div id="chartdiv"></div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- --------------------------------------------------------------------DEPT VIEW END       --------------------------------------------------->
</body>
</html>